<template>
  <div class="box">
    <h5>ONE-第二层组件</h5>
    <p>info:{{ info }}</p>
    <input type="text" v-model="info" />
    <br /><br />
    <input type="button" value="打印$root" @click="printRoot()" />
    <br />
    <input type="button" value="参数传递" @click="sendRootEvent()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "ONE-第二层组件数据",
    };
  },
  watch: {
    info(nv) {
      console.log(nv);
      // this.$root.$emit("update-info", nv);
      this.sendRootEvent();
    },
    // info: {
    //   handler() {
    //     console.log("one-childComp 监视器info");
    //     this.sendRootEvent();
    //   },
    //   // 当前监视器在当前组件首次加载时，立即执行
    //   // 中央事件总线中，不能使用监视完整自动触发操作，因为加载顺序的问题，可能会早于事件绑定前触发
    //   immediate: true,
    // },
  },
  methods: {
    printRoot() {
      console.log("this.$root", this.$root);
    },
    sendRootEvent() {
      this.$root.$emit("update-info", this.info);
    },
  },
  beforeMount() {
    console.log("ChildCom beforeMount");
  },
  mounted() {
    console.log("ChildCom mounted");
    this.sendRootEvent();
  },
};
</script>
